import { CONTAINER_TYPE, ComponentTreeNode } from "@illa-public/public-types"
import { v4 } from "uuid"
import {
  FORM_ADD_TITLE_NODE,
  FORM_EDIT_TITLE_DIVIDER_NODE,
  FROM_ADD_TITLE_DIVIDER_NODE,
  FROM_EDIT_TITLE_NODE,
} from "./widgetNode"

// form add container
export const FORM_CONTAINER_ADD_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "canvas5",
  parentNode: "container2",
  showName: "canvas",
  childrenNode: [FORM_ADD_TITLE_NODE, FROM_ADD_TITLE_DIVIDER_NODE],
  type: "CANVAS",
  containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
  h: 0,
  w: 0,
  minH: 0,
  minW: 1,
  x: -1,
  y: -1,
  z: 0,
  props: {},
}

// form edit container
export const FORM_CONTAINER_EDIT_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "canvas4",
  parentNode: "container2",
  showName: "canvas",
  childrenNode: [FROM_EDIT_TITLE_NODE, FORM_EDIT_TITLE_DIVIDER_NODE],
  type: "CANVAS",
  containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
  h: 0,
  w: 0,
  minH: 0,
  minW: 1,
  x: -1,
  y: -1,
  z: 0,
  props: {},
}

// form container
export const FORM_CONTAINER_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "container2",
  parentNode: "bodySection1-bodySectionContainer1",
  showName: "container",
  childrenNode: [FORM_CONTAINER_EDIT_NODE, FORM_CONTAINER_ADD_NODE],
  type: "CONTAINER_WIDGET",
  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
  h: 81,
  w: 10,
  minH: 3,
  minW: 1,
  x: 22,
  y: 8,
  z: 0,
  props: {
    $dynamicAttrPaths: [],
    backgroundColor: "#ffffffff",
    borderColor: "#f5efefff",
    borderWidth: "1px",
    currentIndex: 0,
    currentKey: "View 1",
    defaultView: "View 1",
    dynamicHeight: "auto",
    padding: { mode: "partial", size: "16 24 16 24" },
    radius: "4px",
    resizeDirection: "HORIZONTAL",
    shadow: "small",
    viewList: [
      {
        id: v4(),
        key: "View 1",
        label: "View 1",
      },
      {
        id: v4(),
        key: "View 2",
        label: "View 2",
      },
    ],
  },
}

// data grid container
export const DATA_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "canvas1",
  parentNode: "container1",
  showName: "canvas",
  childrenNode: [],
  type: "CANVAS",
  containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
  h: 0,
  w: 0,
  minH: 0,
  minW: 1,
  x: -1,
  y: -1,
  z: 0,
  props: {},
}

// data container
export const DATA_CONTAINER_NODE: ComponentTreeNode = {
  version: 0,
  displayName: "container1",
  parentNode: "bodySection1-bodySectionContainer1",
  showName: "container",
  childrenNode: [
    DATA_NODE,
    {
      version: 0,
      displayName: "canvas2",
      parentNode: "container1",
      showName: "canvas",
      childrenNode: [],
      type: "CANVAS",
      containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
      h: 0,
      w: 0,
      minH: 0,
      minW: 1,
      x: -1,
      y: -1,
      z: 0,
      props: {},
    },
    {
      version: 0,
      displayName: "canvas3",
      parentNode: "container1",
      showName: "canvas",
      childrenNode: [],
      type: "CANVAS",
      containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
      h: 0,
      w: 0,
      minH: 0,
      minW: 1,
      x: -1,
      y: -1,
      z: 0,
      props: {},
    },
  ],
  type: "CONTAINER_WIDGET",
  containerType: CONTAINER_TYPE.EDITOR_SCALE_SQUARE,
  h: 87,
  w: 21,
  minH: 3,
  minW: 1,
  x: 0,
  y: 8,
  z: 0,
  props: {
    $dynamicAttrPaths: [],
    backgroundColor: "#ffffffff",
    currentIndex: 0,
    currentKey: "View 1",
    dynamicHeight: "auto",
    padding: { mode: "all", size: "24" },
    radius: "4px",
    resizeDirection: "HORIZONTAL",
    shadow: "small",
    viewList: [
      {
        id: v4(),
        key: "View 1",
        label: "View 1",
      },
      {
        id: v4(),
        key: "View 2",
        label: "View 2",
      },
      {
        id: v4(),
        key: "View 3",
        label: "View 3",
      },
    ],
  },
}
